import { onMounted, onUnmounted, computed } from 'vue'
import { onBeforeRouteLeave, useRoute } from 'vue-router'
import useEditorStore from '@/store/modules/editorStore'
import { Modal } from 'ant-design-vue'
// 定义一个useSaveWork函数，用于保存作品
const useSaveWork = (saveSetting = true) => {
  // 使用editorStore
  const editorStore = useEditorStore()
  // 使用路由
  const route = useRoute()
  // 定义一个异步函数，用于保存作品
  const saveWork = async () => {
    await editorStore.saveTemplateInfo(route.params.id as string)
  }
  // 使用computed计算属性，判断是否自动保存
  const isAutoSave = computed(() => editorStore.isAutoSave)
  let timer: null | number = 0
  if (saveSetting) {
    //监听路由离开事件
    onBeforeRouteLeave((to, from, next) => {
      // 如果自动保存为true，则弹出确认框
      if (editorStore.isAutoSave) {
        Modal.confirm({
          title: '提示',
          content: '是否保存当前作品?',
          okText: '保存',
          okType: 'primary',
          cancelText: '不保存',
          onOk: async () => {
            // 如果点击保存，则调用saveWork函数保存作品
            await saveWork()
            next()
          },
          onCancel: () => {
            // 如果点击不保存，则直接离开
            next()
          },
        })
      } else {
        // 如果自动保存为false，则直接离开
        next()
      }
    })
  }
  // 在组件挂载时，设置定时器，每隔3分钟自动保存一次
  onMounted(() => {
    if (saveSetting) {
      timer = setInterval(
        () => {
          // 如果自动保存为true，则调用saveWork函数保存作品
          if (isAutoSave.value) {
            saveWork()
          }
        },
        1000 * 60 * 3
      )
    }
  })
  // 在组件卸载时，清除定时器
  onUnmounted(() => {
    clearInterval(timer as number)
    timer = null
  })
  // 返回saveWork函数
  return {
    saveWork,
  }
}
// 导出useSaveWork函数
export default useSaveWork
